<template>
  <div class="video-generator">
    <el-button type="primary" @click="generateVideo">生成视频</el-button>
    <a v-if="videoURL" :href="videoURL" download="generated-video.webm">
      <el-button type="success">下载视频</el-button>
    </a>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElButton } from 'element-plus'

export default {
  components: {
    ElButton
  },
  setup() {
    const videoURL = ref('')

    const generateVideo = async () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const width = 640
      const height = 480
      canvas.width = width
      canvas.height = height

      // Fill canvas with a color for demonstration purposes
      ctx.fillStyle = 'lightblue'
      ctx.fillRect(0, 0, width, height)

      // Generate a simple animation by drawing different frames
      const stream = canvas.captureStream(30) // 30 fps
      const mediaRecorder = new MediaRecorder(stream, {
        mimeType: 'video/webm'
      })

      const chunks = []
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          chunks.push(event.data)
        }
      }

      mediaRecorder.onstop = () => {
        const blob = new Blob(chunks, { type: 'video/webm' })
        videoURL.value = URL.createObjectURL(blob)
      }

      mediaRecorder.start()

      // Stop recording after 5 seconds
      setTimeout(() => {
        mediaRecorder.stop()
      }, 5000)
    }

    return {
      videoURL,
      generateVideo
    }
  }
}
</script>

<style scoped>
.video-generator {
  padding: 20px;
  text-align: center;
}

.el-button {
  margin: 10px;
}
</style>
